<template>
  <div class="cmscomen newCus">
    <div class="infoTable" :style="{ paddingLeft: paddingWidth + 'px'}">
      <div class="topMenu">
        <span>信息流数据管理</span>
        <span style="padding:0 4px;">/</span>
        <span>客户管理</span>
        <span style="padding:0 4px;">/</span>
        <span class="two">新建客户</span>
      </div>
      <div class="wrapColor" :style="{ width: wraColrWidth}">
        <el-form label-width="100px" :model="ruleForm" :rules="rules" ref="ruleForm">
            <div class="mixTitle">公司信息</div>
            <div class="paLeft">
              <el-form-item label="客户名称" prop="cusName">
                <el-input v-model="ruleForm.cusName" placeholder="请输入客户名称"></el-input>
              </el-form-item>
              <el-form-item label="营业执照号" prop="licence">
                <el-input v-model="ruleForm.licence" placeholder="请输入营业执照"></el-input>
              </el-form-item>
              <el-form-item label="证件有效期" prop="date">
                    <el-date-picker
                      v-model="ruleForm.date"
                      type="date"
                      placeholder="请选择选择日期">
                    </el-date-picker>
              </el-form-item>
            </div>
            <div class="mixTitle">联系方式</div>
            <div class="paLeft">
              <el-form-item label="联系人" prop="linkMan">
                <el-input v-model="ruleForm.linkMan" placeholder="请输入联系人"></el-input>
              </el-form-item>
              <el-form-item label="手机号码" prop="phoneNumber">
                <el-input v-model="ruleForm.phoneNumber" placeholder="请输入手机号码"></el-input>
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="ruleForm.email" placeholder="请输入邮箱"></el-input>
              </el-form-item>
              <el-form-item label="QQ" prop="QQ">
                <el-input v-model="ruleForm.QQ" placeholder="请输入QQ号码"></el-input>
              </el-form-item>
              <el-form-item label="地址" prop="address">
                <el-input v-model="ruleForm.address" placeholder="请按照格式输入地址：省 市 详细地址" style="width:300px"></el-input>
              </el-form-item>
            </div>
            <div class="mixTitle">财务信息</div>
            <div class="paLeft">
              <el-form-item label="财务类型" prop="financialType">
                  <el-select v-model="ruleForm.financialType" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="纳税登记号" prop="registrationNumber">
                <el-input v-model="ruleForm.registrationNumber" placeholder="请输入纳税登记号"></el-input>
              </el-form-item>
              <el-form-item label="收款银行" prop="dueBank">
                <el-input v-model="ruleForm.dueBank" placeholder="请输入收款银行"></el-input>
              </el-form-item>
              <el-form-item label="开户地址" prop="openingAddress">
                <el-input v-model="ruleForm.openingAddress" placeholder="请输入开户地址"></el-input>
              </el-form-item>
              <el-form-item label="银行账号" prop="bankAccount">
                <el-input v-model="ruleForm.bankAccount" placeholder="请输入银行账号"></el-input>
              </el-form-item>
            </div>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
              <el-button @click="resetForm('ruleForm')">取消</el-button>
            </el-form-item>
       </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  data(){
    return {
        ruleForm: {
          cusName: '',
          licence:'',
          date: '',
          linkMan:'',
          phoneNumber:'',
          email:'',
          QQ:'',
          address:'',
          type: [],
          registrationNumber:'',
          dueBank:'',
          openingAddress:'',
          bankAccount:''
        },
        rules: {
          cusName: [
            { required: true, message: '请输入客户名称', trigger: 'blur' },
          ],
          licence: [
            { required: true, message: '请输入营业执照号', trigger: 'blur' },
          ],
          date: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          linkMan: [
            { required: true, message: '请输入联系人', trigger: 'blur' },
          ],
          phoneNumber: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
          ],
          email: [
            { required: true, message: '请输入email', trigger: 'blur' },
          ],
          QQ: [
            { required: true, message: '请输入QQ', trigger: 'blur' },
          ],
          address: [
            { required: true, message: '请输入地址', trigger: 'blur' },
          ],
          financialType: [
            { required: true, message: '请至少选择一个财务类型', trigger: 'change' }
          ],
          registrationNumber: [
            { required: true, message: '请输入纳税登记号', trigger: 'blur' },
          ],
          dueBank: [
            { required: true, message: '请输入收款银行', trigger: 'blur' },
          ],
          openingAddress: [
            { required: true, message: '请输入开户地址', trigger: 'blur' },
          ],
          bankAccount: [
            { required: true, message: '请输入银行账号', trigger: 'blur' },
          ],
        },
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
    };  
  },
  computed:{
    paddingWidth(){
      return this.$store.state.paddingWidth;
    },
    wraColrWidth(){
      return this.$store.state.wraColrWidth;
    }
  },
  created(){
  },
  methods:{
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    add(){
        this.flag = true;
        this.operators.push({
            "date": "",
            "id": null,
            "operatorId": ''
        });
    },
    deleted(index){
      this.operators.splice(index,1)
    }
  }
}
</script>
<style>
.newCus .el-form-item__content .el-input{
  width: 217px;
}
</style>